<template>
    <section>
        <el-row>
            <el-col :span="8" style='margin-top:15px;'>
                <el-input
                        placeholder="输入关键字进行过滤"
                        v-model="filterText">
                </el-input>
                <el-tree
                        class="filter-tree"
                        :data="treeData"
                        node-key="id"
                        highlight-current
                        :props="defaultProps"
                        :load="loadOrg" lazy
                        :filter-node-method="filterNode"
                        ref="menuTree"
                        @node-click="getNodeData"
                >
                </el-tree>
            </el-col>
            <el-col :span="16" style='margin-top:15px;'>
                <div v-if="userListShow">
                <sysOrgUserList  :parentId="parentId"></sysOrgUserList>
                </div>
            </el-col>
        </el-row>

    </section>

</template>
<style>

</style>
<script>
    import {AjaxByAll} from '@/api/api';
    import sysOrgUserList from '@/views/sys/org/sys_org_user_list.vue'

    export default {
        data() {

            return {

                defaultProps: {
                    children: 'children',
                    label: 'name'
                },
                treeData: [],
                parentId: null,
                userListShow:true

            }
        },

        methods: {
            filterNode(value, data) {

                if (!value) return true;

                return data.name.indexOf(value) !== -1;
            },
            getNodeData(data) {

                this.userListShow=false;
                this.parentId = data.id;
                this.$nextTick(function () {
                    this.userListShow=true;
                })

            },
            loadOrg(node, resolve) {


                let id='';
                if(node.data && node.data.id) {
                    id= node.data.id;

                }
                let urls = 'sys/org/dept/deptTree?parentId='+id;
                let subNodes = [];
                AjaxByAll('post', urls, {}).then(data => {
                    if(data.code === 200) {
                        for(let i = 0; i < data.data.length; i++) {
                            subNodes.push({
                                children: [],
                                name: data.data[i].name,
                                id: data.data[i].id,
                                orgType:data.data[i].orgType,
                                data: data.data[i],
                            });

                        }

                    }

                    return resolve(subNodes);

                });

            },
        },
        created() {

        },
        mounted: function () {

        }, components: {
            sysOrgUserList
        }
    }
</script>
